<template>
  <DetailLayout :bg-image="groupInfo?.bgImage ?? ''">
    <template #avatar>
      <!-- 头像 -->
      <div class="w-full px-4 flex flex-row items-center text-white gap-3">
        <n-avatar :size="90" :src="groupInfo?.avatar ?? ''" circle />
        <div class="pt-5 flex flex-col gap-3">
          <p>{{ groupInfo?.name }}</p>
          <p class="text-xs text-fontSecondary">创建于 {{ groupInfo?.CreatedAt }}</p>
        </div>
      </div>
    </template>
    <template #content>
      <!-- 账号 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-beizhu mr-1"></span>
          群账号：
        </div>
        <span>{{ groupInfo?.numberId }}</span>
      </div>

      <!-- 备注 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-beizhu mr-1"></span>
          备注：
        </div>
        <span>{{ groupInfo?.name }}</span>
      </div>
      <!-- 群介绍 -->
      <div class="flex flex-row justify-between items-center">
        <div>
          <span class="iconfont icon-fenzu mr-1"></span>
          群介绍：
        </div>
        <p>{{ groupInfo?.description }}</p>
      </div>
      <el-divider style="margin: 0" />
      <!-- 群成员 -->
      <div>
        <div class="mb-4"><span class="iconfont icon-zhanghao mr-1"></span> 群成员：</div>
        <div class="px-4 flex flex-row gap-4">
          <n-avatar
            v-for="(item, index) in groupMembers"
            :key="index"
            :name="item.name"
            :size="48"
            :src="item.avatar"
            round
          />
        </div>
      </div>
      <!-- 按钮 -->
      <div class="text-center pt-[20px]">
        <el-button>语音通话</el-button>
        <el-button>视频通话</el-button>
        <el-button type="primary" @click="GoChat">发送消息</el-button>
      </div>
    </template>
  </DetailLayout>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { GetGroupMemberList } from "@/api/group";
import { IGroupListItem, IGroupMember } from "@/types/group";
import { ChatType, MessageType } from "@/types/chat";
import { useChat } from "@/store/modules/chat";
import { useUser } from "@/store/modules/user";
import { useCache } from "@/store/modules/cache";
import { useSession } from "@/store/modules/session";
import { useRouter } from "vue-router";
import { NAvatar } from "naive-ui";
import DetailLayout from "../components/DetailLayout.vue";

const user = useUser();
const chat = useChat();
const cache = useCache();
const session = useSession();
const router = useRouter();
const groupMembers = ref<IGroupMember[]>([]);
let groupInfo = ref<IGroupListItem>({} as IGroupListItem);

const props = withDefaults(
  defineProps<{
    groupId: number;
  }>(),
  {
    groupId: 0,
  },
);

async function GetGroupMember(groupId: number) {
  if (!groupId) return;
  try {
    let members = cache.GroupMemberCache.get(groupId);
    if (!members) {
      const res = await GetGroupMemberList(groupId);
      if (res?.status != 200) throw Error("请求失败");
      members = res.data;
    }
    if (members) {
      cache.GroupMemberCache.set(groupId, members);
      groupMembers.value = members;
    }
  } catch (error) {
    console.error("获取群成员失败:", error);
  }
}

// 点击进行聊天
async function GoChat() {
  if (!groupInfo.value) return;
  const { name, avatar, sessionId, id: toId } = groupInfo.value;
  let commonParams = { name, avatar, sessionId, chatType: ChatType.group };
  await session.AddSession({
    ownerId: user.userId!,
    toId,
    sessionType: MessageType.text,
    content: "",
    unread: 0,
    ...commonParams,
  });
  chat.ChatObject = { id: toId, ...commonParams };
  await router.push("/message");
}

watch(
  () => props.groupId,
  async (newVal) => {
    if (!newVal) return;
    let info = cache.GetGroupInfo(props.groupId);
    if (info) groupInfo.value = info;
    await GetGroupMember(newVal);
  },
  {
    immediate: true,
  },
);
</script>

<style lang="scss" scoped></style>
